{% extends "airflow/master.html" %}

{% block title %}Airflow - DAG {{ dag.dag_id }}{% endblock %}

{% block head_css %}
{{ super() }}
{% endblock %}

{% block body %}
  <h3>
  {% if dag.parent_dag %}
    <span style='color:#AAA;'>SUBDAG:</span> <span>{{ dag.dag_id }}</span>
  {% else %}
    <span style='color:#AAA;'>DAG:</span> <span>{{ dag.dag_id }}</span>
  {% endif %}
  {% if root %}
    <span style='color:#AAA;'>ROOT:</span> <span>{{ root }}</span>
  {% endif %}
  </h3>
  <ul class="nav nav-pills">
    {% if dag.parent_dag %}
        <li class="never_active"><a href="{{ url_for("airflow.graph", dag_id=dag.parent_dag.dag_id) }}">
            <span class="glyphicon glyphicon-arrow-left" aria-hidden="true"></span>
            Back to {{ dag.parent_dag.dag_id }}</a>
        </li>
    {% endif %}
    <li><a href="{{ url_for("airflow.graph", dag_id=dag.dag_id, root=root) }}">
        <span class="glyphicon glyphicon-certificate" aria-hidden="true"></span>
      Graph View</a></li>
    <li><a href="{{ url_for("airflow.tree", dag_id=dag.dag_id, num_runs=25, root=root) }}">
        <span class="glyphicon glyphicon-tree-deciduous" aria-hidden="true"></span>
      Tree View
    </a></li>
    <li><a href="{{ url_for("airflow.duration", dag_id=dag.dag_id, days=30, root=root) }}">
        <span class="glyphicon glyphicon-stats" aria-hidden="true"></span>
        Task Duration
    </a></li>
    <li>
      <a href="{{ url_for("airflow.landing_times", dag_id=dag.dag_id, days=30, root=root) }}">
        <span class="glyphicon glyphicon-plane" aria-hidden="true"></span>
        Landing Times
      </a>
    </li>
    <li>
      <a href="{{ url_for("airflow.gantt", dag_id=dag.dag_id, root=root) }}">
        <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
        <i class="icon-align-left"></i>
        Gantt
      </a>
    </li>
    <li>
      <a href="{{ url_for("airflow.code", dag_id=dag.dag_id, root=root) }}">
        <span class="glyphicon glyphicon-flash" aria-hidden="true"></span>
        Code
      </a>
    </li>
  </ul>
  <hr>
  <!-- Modal -->
  <div class="modal fade" id="myModal"
        tabindex="-1" role="dialog"
      aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title" id="myModalLabel">
            <span id='task_id'></span>
            <button id="btn_filter" type="button" class="btn btn-default" title="Filter on this task and upstream ">
              <span class="glyphicon glyphicon-filter" style="margin-left: 0px;" aria-hidden="true"></span>
            </button>
              on
            <span id='execution_date'></span>
          </h4>
        </div>
        <div class="modal-body">
          <div id="div_btn_subdag">
              <button id="btn_subdag" type="button" class="btn btn-primary">
                Zoom into Sub DAG
              </button>
              <hr/>
          </div>
          <button id="btn_task" type="button" class="btn btn-primary">
            Task Details
          </button>
          <button id="btn_rendered" type="button" class="btn btn-primary">
            Rendered
          </button>
          <button id="btn_ti" type="button" class="btn btn-primary">
            Task Instances
          </button>
          <button id="btn_log" type="button" class="btn btn-primary">
            View Log
          </button>
          <hr/>
          <button id="btn_run" type="button" class="btn btn-primary"
            title="Runs a single task instance">
            Run
          </button>
          <span class="btn-group">
            <button id="btn_force"
              type="button" class="btn" data-toggle="button"
              title="Ignore previous success, re-run regardless"
              >Force</button>
            <button id="btn_deps"
              type="button" class="btn" data-toggle="button"
              tittle="Disregard the status of upstream dependencies and depends_on_past"
              >Ignore Dependencies</button>
          </span>
          <hr/>
          <button id="btn_clear" type="button" class="btn btn-primary"
              title="Clearing deletes the previous state of the task instance, allowing it to get re-triggered by the scheduler or a backfill command"
              >Clear
          </button>
          <span class="btn-group">
            <button id="btn_past"
              type="button" class="btn" data-toggle="button"
              title="Also include past task instances when clearing this one"
              >Past</button>
            <button id="btn_future"
              type="button" class="btn" data-toggle="button"
              title="Also include future task instances when clearing this one"
              >Future</button>
            <button id="btn_upstream"
              type="button" class="btn" data-toggle="button"
              title="Also include upstream dependencies"
              >Upstream</button>
            <button id="btn_downstream"
              type="button" class="btn active" data-toggle="button"
              title="Also include downstream dependencies"
              >
              Downstream
            </button>
          </span>
          <hr/>
          <button id="btn_success" type="button" class="btn btn-primary">
            Mark Success
          </button>
          <span class="btn-group">
            <button id="btn_success_past"
              type="button" class="btn" data-toggle="button">Past</button>
            <button id="btn_success_future"
              type="button" class="btn" data-toggle="button">
              Future
            </button>
            <button id="btn_success_upstream"
              type="button" class="btn" data-toggle="button">Upstream</button>
            <button id="btn_success_downstream"
              type="button" class="btn" data-toggle="button">
              Downstream
            </button>
          </span>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">
            Close
          </button>
        </div>
      </div>
    </div>
  </div>
{% endblock %}
{% block tail %}
  {{ super() }}
  <script>
function updateQueryStringParameter(uri, key, value) {
  var re = new RegExp("([?&])" + key + "=.*?(&|$)", "i");
  var separator = uri.indexOf('?') !== -1 ? "&" : "?";
  if (uri.match(re)) {
    return uri.replace(re, '$1' + key + "=" + value + '$2');
  }
  else {
    return uri + separator + key + "=" + value;
  }
}

    // Pills highlighting
    $(document).ready(function () {
      $('a[href*="' + this.location.pathname + '"]').parent().addClass('active');
      $('.never_active').removeClass('active');
    });

    var dag_id = '{{ dag.dag_id }}';
    var task_id = '';
    var exection_date = '';
    var subdag_id = '';
    function call_modal(t, d, sd) {
      task_id = t;
      loc = String(window.location);
      $("#btn_filter").on("click", function(){
        window.location = updateQueryStringParameter(loc, "root", task_id);
      });
      subdag_id = sd;
      execution_date = d;
      $('#task_id').html(t);
      $('#execution_date').html(d);
      $('#myModal').modal({});
      $("#myModal").css("margin-top","0px")
        if (subdag_id===undefined)
            $("#div_btn_subdag").hide();
        else {
            $("#div_btn_subdag").show();
            subdag_id = "{{ dag.dag_id }}."+t;
        }
    }

    $("#btn_rendered").click(function(){
      url = "{{ url_for('airflow.rendered') }}" +
        "?task_id=" + task_id +
        "&dag_id=" + dag_id +
        "&execution_date=" + execution_date;
      window.location = url;
    });

    $("#btn_subdag").click(function(){
      url = "{{ url_for('airflow.graph') }}" +
        "?dag_id=" + subdag_id +
        "&execution_date=" + execution_date;
      window.location = url;
    });

    $("#btn_log").click(function(){
      url = "{{ url_for('airflow.log') }}" +
        "?task_id=" + task_id +
        "&dag_id=" + dag_id +
        "&execution_date=" + execution_date;
      window.location = url;
    });

    $("#btn_task").click(function(){
      url = "{{ url_for('airflow.task') }}" +
        "?task_id=" + task_id +
        "&dag_id=" + dag_id +
        "&execution_date=" + execution_date;
      window.location = url;
    });

    $("#btn_ti").click(function(){
      url = "/admin/taskinstance/" +
        "?flt1_dag_id_equals=" + dag_id +
        "&flt2_task_id_equals=" + task_id +
        "&sort=3&desc=1";
      window.location = url;
    });

    $("#btn_run").click(function(){
      url = "{{ url_for('airflow.action') }}" +
        "?action=run" +
        "&task_id=" + task_id +
        "&dag_id=" + dag_id +
        "&force=" + $('#btn_force').hasClass('active') +
        "&deps=" + $('#btn_deps').hasClass('active') +
        "&execution_date=" + execution_date +
        "&origin=" + encodeURIComponent(window.location);
      window.location = url;
    });

    $("#btn_clear").click(function(){
      url = "{{ url_for('airflow.action') }}" +
        "?action=clear" +
        "&task_id=" + task_id +
        "&dag_id=" + dag_id +
        "&future=" + $('#btn_future').hasClass('active') +
        "&past=" + $('#btn_past').hasClass('active') +
        "&upstream=" + $('#btn_upstream').hasClass('active') +
        "&downstream=" + $('#btn_downstream').hasClass('active') +
        "&execution_date=" + execution_date +
        "&origin=" + encodeURIComponent(window.location);
      window.location = url;
    });

    $("#btn_success").click(function(){
      url = "{{ url_for('airflow.action') }}" +
        "?action=success" +
        "&task_id=" + task_id +
        "&dag_id=" + dag_id +
        "&upstream=" + $('#btn_success_upstream').hasClass('active') +
        "&downstream=" + $('#btn_success_downstream').hasClass('active') +
        "&future=" + $('#btn_success_future').hasClass('active') +
        "&past=" + $('#btn_success_past').hasClass('active') +
        "&execution_date=" + execution_date +
        "&origin=" + encodeURIComponent(window.location);

      window.location = url;
    });

    $("#btn_gantt").click(function(){
      url = "{{ url_for('airflow.gantt') }}" +
        "?dag_id=" + dag_id +
        "&execution_date=" + execution_date;
      window.location = url;
    });

    $("#btn_graph").click(function(){
      url = "{{ url_for('airflow.graph') }}" +
        "?dag_id=" + dag_id +
        "&execution_date=" + execution_date;
      window.location = url;
    });

  </script>
{% endblock %}
